<script lang="ts" setup>
import { defineProps, defineEmits, computed } from 'vue'
import { More } from '@element-plus/icons-vue'
import storage from '@/utils/storage'
// 直接使用defineProps，不保存到变量
const props = defineProps<{
  messages: SocketMessage['data'][],
  group: number
}>()

const userInfo = computed(() => {
    return storage.get('userinfo') || {}
})
const emit = defineEmits(['user-action'])

const defaultActions = [
    {
        label: '回复',
        command: 'reply',
        disabled: true
    },
    {
        label: '禁言',
        command: 'mute',
        disabled: true
    },
    {
        label: '拉黑',
        command: 'block',
        disabled: true
    },
    {
        label: '撤回',
        command: 'withdraw',
        disabled: true
    }
]

const actions = computed(() => {
    return defaultActions.filter(item => !item.disabled)
})

const messageContent = computed(() => {
    return (msg: SocketMessage['data']) => {
        console.log(msg)

        switch (msg.type) {
            case 'text':
                return `<span>${JSON.parse(msg.content).text || ''}</span>`
            case 'image':
                return `<img src="${msg.content}" alt="图片" />`
            case 'file':
                return `<a href="${msg.content}" target="_blank">${msg.file_name}</a>`
            case 'goods':
                return `<a href="${msg.good_url}" target="_blank">${msg.good_name}</a>`
            default:
                return ''
        }
    }
})

const messageList = computed(() => {
    return props.messages
})

const handleUserClick = (msg: SocketMessage['data']) => {
    if (msg.uid === userInfo.value.uid) return
    emit('user-action', 'detail', msg)
}

</script>

<template>
  <div class="message-list">
    <div
      v-for="msg,index in messageList"
      :key="index"
      :class="['message-item', {'mine': msg.uid === userInfo.uid}]">
      <el-avatar class="avatar" :src="msg.face" alt="用户头像" @click="handleUserClick(msg)"></el-avatar>

      <div class="message-content">
        <div class="message-header">
          <span class="sender">{{ msg.username || '微信用户' }}</span>
          <span class="message-time">{{ msg.time }}</span>
        </div>

        <div class="message-body">
          <div v-html="messageContent(msg)"></div>
        </div>

        <div v-if="actions.length" class="message-actions">
          <el-dropdown
            @command="(command:string) => emit('user-action', command, msg)">
            <span class="el-dropdown-link">
              <el-icon><More /></el-icon>
            </span>
            <template #dropdown>
              <el-dropdown-menu>
                <el-dropdown-item v-for="item,index in actions" :key="index" :command="item.command">{{ item.label }}</el-dropdown-item>
              </el-dropdown-menu>
            </template>
          </el-dropdown>
        </div>
      </div>
    </div>
  </div>
</template>

<style scoped lang="scss">
.message-list {
  flex: 1;
  overflow-y: auto;
  padding: 10px;

  .message-item {
    display: flex;
    margin: 10px 0;
  }

  .avatar {
    margin: 0 5px;
  }

  .message-content {
    max-width: 70%;

    border-radius: 5px;
    padding: 10px 5px;
    position: relative;

    .message-header {
      display: flex;
      align-items: center;
      justify-content: space-between;
      margin-bottom: 5px;

      .sender {
        font-weight: bold;
        margin-right: 5px;
        display: -webkit-box;
        -webkit-line-clamp: 1;
        line-clamp: 1;
        -webkit-box-orient: vertical;
        overflow: hidden;
      }

      .message-time {
        font-size: 12px;
        color: #909399;
        margin-left: 5px;
      }
    }

    .message-body {
      // min-width: 70%;
      word-break: break-word;
      background: #f5f5f5;
      padding: 10px;
      border-radius: 8px;
      font-size: 14px;
      display: flex;
      justify-content: flex-start;
    }

    .message-actions {
      text-align: right;
      margin-top: 5px;
    }
  }

  .message-item.mine {
    flex-direction: row-reverse;

    .message-header {
      flex-direction: row-reverse;
      justify-content: flex-start;
      .message-time {
        margin-right: 5px;
        margin-left: 0;
      }
    }

    .message-body {
      display: flex;
      justify-content: flex-end;
      background: #e0f0ff;

    }
  }
}

</style>
